<template>
	<view>
		<myheader :leftType="2" :noLeft="false" :showTitle="'确认订单'"
			showBackground="white"></myheader>
		<view class="content">
			<view class="content-top">
				<view class="content-top-title">
					<image src="/static/juhe.svg" class="content-top-title-img" mode=""></image>
					<view class="content-top-title-txt">我是一家店</view>
				</view>
				<view class="content-top-store">
					<image src="/static/index/1.png" class="content-top-store-left" mode=""></image>
					<view class="content-top-store-right">
						<view class="content-top-store-right-1">单行缩略的文本</view>
						<view class="content-top-store-right-2">多行缩略的文本多行缩略的文本
						多行缩略的文本多行缩略的文本</view>
						<view class="content-top-store-right-3">¥{{returnMoney(1234.18)}}</view>
					</view>
				</view>
			</view>
			<view class="content-bottom">
				<view class="content-1">共1件，合计</view>
				<view class="content-bottom-2">¥1234.12</view>
				<view class="content-bottom-3">立即支付</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
		import myheader from '../../components/header/index.vue';
	export default {
		components: {
			myheader
		},
		data() {
			return {
				navHeight: '',
				navTop: '',
				navObj: '',
				navObjWid: ''
			}
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			let menuButtonObject = wx.getMenuButtonBoundingClientRect();
			let statusBarHeight = systemInfo.statusBarHeight
			let navTop = menuButtonObject.top
			let navObjWid = systemInfo.windowWidth - menuButtonObject.right + menuButtonObject.width // 胶囊按钮与右侧的距离 = windowWidth - right+胶囊宽度
			let navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
			this.navHeight = navHeight; //导航栏总体高度
			this.navTop = navTop; //胶囊距离顶部距离
			this.navObj = menuButtonObject.height; //胶囊高度
			this.navObjWid = navObjWid; //胶囊宽度(包括右边距离)
		
		},
		methods: {
			goShare() {},
			returnMoney(money) {
				return money.toLocaleString()
			},
		}
	}
</script>
<style lang="scss">
	.jiaonang {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: #fff;
		&-box {
			display: flex;
			justify-content: flex-end;
			&-back {
				display: flex;
				align-items: center;
				justify-content: space-around;
				&-img {
					margin-right: 5px
				}
				&-txt {
					font-size: 32rpx;
					font-weight: 500;
					color: #1ABC9C;
				}
			}
		}
	}
	.content {
		padding: 10px 10px 100px;
		&-bottom {
			bottom: 0;
			left: 0;
			position: fixed;
			z-index: 100;
			height:70px;
			width:100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			background-color: #fff;
			padding-bottom: calc(14rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(14rpx + env(safe-area-inset-bottom));
			&-1 {
				font-size: 16px;
				color: #7C92A8;
			}
			&-2 {
				font-size: 20px;
				font-weight: 700;
				color: #1ABC9C;
				margin: 0 10px;
			}
			&-3 {
				width: 84px;
				height:54px;
				background-color: #00BC8D;
				color:#fff;
				font-size: 16px;
				font-weight: 700;
				line-height: 54px;
				text-align: center;
				border-radius: 140px;
				margin-right:20px;
			}
		}
		&-top {
			border-radius: 10px;
			background-color: #fff;
			&-title {
				display: flex;
				align-items: center;
				padding: 10px;
				border: 1px solid #EAECEF;
				&-img {
					width:24px;
					height:24px
				}
				&-txt {
					font-size: 14px;
					font-weight: 400;
					color: #2A537C;
				}
			}
			&-store {
				padding: 10px;
				display: flex;
				&-left {
					width: 96px;
					height:96px;
					border-radius: 10px;
					margin-right: 4px;
				}
				&-right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: calc(100% - 100px);
					&-1 {
						white-space: nowrap;      /* 强制文本在一行显示 */
						overflow: hidden;         /* 隐藏超出部分 */
						text-overflow: ellipsis;  /* 超出部分显示为省略号 */
						width: 100%;
						font-size: 16px;
						font-weight: 700;
						color: #2A537C;
					}
					&-2 {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2; /* 显示的行数 */
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 14px;
						color: #7C92A8;
						line-height: 22px;
					}
					&-3 {
						color: #2A537C;
						font-size: 14px;
						font-weight: 600;
					}
				}
			}
		}
	}

</style>
